<template>
  <van-pull-refresh v-model="loading" @refresh="onRefresh">
    <div class="">
      <div class="card" v-for="(item, index) in dataList" :key="item.id">
        <div class="number">{{ index + 1 }}</div>
        <span class="title" v-if="item.message !== '-'">
          {{ item.message }}
        </span>
        <div class="image-list">
          <span v-for="(imgsrc, index) in item.imageList" :key="index">
            <img class="image-item" :src="imgsrc" @click="showImagePreview(item.imageList, index);"/>
          </span>
        </div>
      </div>
    </div>
  </van-pull-refresh>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted, PropType } from 'vue';
import { showImagePreview } from 'vant';

const props = defineProps({
  type: {
    type: String as PropType<'xyq' | 'cyc'>,
    required: true,
  },
});

const emit = defineEmits<{
  (e: 'update:show', show: boolean): void
  (e: 'submit'): void
}>();

const loading = ref(false);

const dataList = ref<Array<{
  id: string
  imageList: string[]
  message: string
}>>([]);

async function getLetters() {
  fetch(`/nest/message/page-messages`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      type: props.type,
      pageSize: 10,
      current: 1,
    }),
  })
  .then(response => {
    console.log('response', response)
    return response.json();
  })
  .then(data => {
    console.log('data', data)
    dataList.value = [
      ...dataList.value,
      ...data.data.list.map((item: any) => ({
        ...item,
        imageList: (item ? item.images.split(',') : []).map((fileName: string) => `/nest/files/${fileName}`),
      })),
    ]
      // showNotify({ type: 'primary', message: '留言成功', duration: 1500 });
      // // 提交成功后
      // formInfo.message = '';
      // formInfo.fileList = [];
  })
}

/** 下拉刷新数据 */
function onRefresh() {
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
  }, 1000);
}

onMounted(()=>{
  getLetters();
})

defineExpose({
  
})
</script>

<style lang="scss" scoped>
.card {
  position: relative;
  background-color: rgb(240, 240, 240);
  margin: 6px 12px;
  padding: 8px 16px;
  border-radius: 6px;
  .number {
    color: rgb(189, 189, 189);
    position: absolute;
    left: 4px;
    top: 2px;
  }
  .title {
    font-size: 15px;
  }
  .image-list {
    margin-top: 6px;
    .image-item {
      width: 60px;
      height: 60px;
      border: 1px solid rgb(233, 233, 233);
      margin-right: 2px;
    }
  }
}
</style>
